<template>
  <div>
    <div class="home-nav">
      <b-container>
        <b-row>
          <b-col sm='10'>
            <b-nav  class="home-header">
              <b-nav-item active>首页</b-nav-item>
              <b-nav-item>家庭日志</b-nav-item>
              <b-nav-item>家庭健康</b-nav-item>
            </b-nav>
          </b-col>
          <b-col sm='2'>
            <b-row class="home-header">
              <b-col><b-img width="40px" src="https://img0.baidu.com/it/u=1406515706,336510358&fm=26&fmt=auto&gp=0.jpg"></b-img></b-col>
              <b-col>{{loginUer}}</b-col>
              </b-row>
          </b-col>
        </b-row>
      </b-container>
    </div>
    <div >
      <b-container>
        <b-row class="home-create">
          <b-col align-self="right" sm='10'>
            <b-row>
              <b-col v-for="item in member" :key="item.id" sm="1">{{ item.name }}</b-col>
            </b-row>
          </b-col>
          <b-col sm='2'>
            <b-button @click="createHealthy" variant="primary">输入</b-button>
          </b-col>
        </b-row>
      </b-container>
    </div>
    <div class="home-chart" ref="dailyChart" id="echarts_01">1</div>
    <div class="home-form" v-if="isShowHealthyForm">
      <b-container>
        <healthy-form></healthy-form>
      </b-container>
    </div>
  </div>
</template>

<script>
import HealthyForm from './HealthyForm.vue'
import * as echarts from 'echarts'

export default {
  components: {
    HealthyForm
  },
  data () {
    return {
      loginUer: this.$store.getters.getLoginObj.data.username,
      member: [
        {id: '1', name: '成员1'},
        {id: '2', name: '成员2'},
        {id: '3', name: '成员3'}
      ],
      isShowForm: false
    }
  },
  methods: {
    createHealthy () {},
    drawChart () {
      // const healthyFormData = this.$store.getters.getHealthyFormData;
      const chartBar = this.$refs.dailyChart
      if (chartBar) {
        var myChart = echarts.init(chartBar)
        myChart.setOption({
          title: {
            text: 'ECharts'
          },
          tooltip: {},
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        })
      }
    }
  },
  mounted () {
    this.drawChart()
  },
  computed: {
    isShowHealthyForm: function () {
      return this.isShowForm
    }
  }
  // computed: mapGetters({data: 'getdata'})

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.home-nav{
  height: 80px;
  background: #fff;
  margin-bottom: 20px;
}
.home-header{
  padding: 20px;
}
.home-create{
  height: 60px;
  background: #fff;
  padding: 10px;
}
.home-form{
  margin-top: 20px;
}
.home-chart{
  margin-top: 20px;
  width: 400px;
  height: 400px;
}
</style>
